<clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'lg'" [clrModalClosable]=false>
    <h3 class="modal-title">{{'APP_PLAN_DETAIL'|translate}}</h3>
    <div class="modal-body" *ngIf="item">
        <div class="card-block">
            <table class="table table-vertical">
                <tbody>
                <tr>
                    <th>{{'APP_NAME'|translate}}</th>
                    <td>{{item.name}}</td>
                </tr>
                <tr>
                    <th>{{'APP_REGION'|translate}}</th>
                    <td>{{item.regionName}}</td>
                </tr>
                <tr>
                    <th>{{'APP_ZONE'|translate}}</th>
                    <td><span *ngFor="let zone of item.zoneNames">{{zone}},</span></td>
                </tr>
                <tr>
                    <th>{{'APP_PLAN_DEPLOY_TEMPLATE'|translate}}</th>
                    <td>{{getDeployName(item.deployTemplate)}}</td>
                </tr>
                <tr>
                    <th>Master {{'APP_PLAN_NODE_SPEC'|translate}}</th>
                    <td>{{item.planVars['masterModel']}}</td>
                </tr>
                <tr>
                    <th>Worker {{'APP_PLAN_NODE_SPEC'|translate}}</th>
                    <td>{{item.planVars['workerModel']}}</td>
                </tr>
                <tr>
                    <th>{{'APP_CREATED_DATE'|translate}}</th>
                    <td>{{item.createdAt | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn" (click)="cancel()">{{'APP_CANCEL'|translate}}</button>
    </div>
</clr-modal>
